<template>
	<view class="transform">
		<view class="title" @click="toPage('./detail')">
			兑换记录
		</view>
		<view class="typebox">
			<view class="type_item">
				<text>当前余额</text>
				<view class="typelist">
					{{balance}}
				</view>
			</view>
			<view class="type_item">
				<text>兑换币种</text>
				<view class="typelist">
					<radio-group name="typeCheck" @change="radioC">
						<label>
							<radio value="3" :checked="type == 3" /><text>YSB</text>
						</label>
						<label>
							<radio value="5" :checked="type == 5" /><text>BRJ</text>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="type_item">
				<text>单价</text>
				<view class="typelist">
					{{coin_rate}}
				</view>
			</view>
		</view>
		<view class="business">
			<view class="inputlist">
				<view class="left">
					<text>兑换数量</text>
				</view>
				<view class="right">
					<input type="digit" placeholder="请输入兑换数量" v-model="Tnum" placeholder-class="inputColor">
				</view>
			</view>
			<view class="inputlist">
				<view class="left">
					<text>支付密码</text>
				</view>
				<view class="right">
					<input type="text" password="true" placeholder="请输入支付密码" v-model="password"
						placeholder-class="inputColor">
				</view>
			</view>
			<!-- <view class="inputlist" v-show="type == 3">
				<view class="left">
					<text>验证码</text>
				</view>
				<view class="right" style="display: flex;">
					<input type="number" placeholder="请输入验证码" v-model="code" maxlength="4"
						placeholder-class="inputColor">
					<text style="padding: 3px 5px;display: block;width: 82px;text-align: center;margin-right: 0;"
						@click="getCode()">{{getCodeText}}</text>
				</view>
			</view> -->
			<view class="tips">
				兑换比例 {{Number(sxf)}} %
			</view>
			<view class="passwordbox" v-show="pShow">
				<view class="passwordmain">
					<view class="password_title">
						支付密码
					</view>
					<input type="password" v-model="password" placeholder="请输入支付密码">
					<view class="btns">
						<view class="cancel" @click="pShow = false">
							取消
						</view>
						<view class="sure" @click.stop="sure">
							确认
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<button class="btn_sumbit" @click="exchange" :loading="loading" :disabled="loading">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		SendCode
	} from "@/api/api.js"
	import {
		Index,
		exchange
	} from "@/api/user.js"
	export default {
		data() {
			return {
				num: 0,
				Tnum: '',
				Tname: '',
				type: 3,
				sxf: 0,
				sxf2: 0,
				balance: 0,
				info: [],
				pShow: false,
				password: '',
				transfer_fees: 0, //余额手续费
				transfer_fees2: 0, //YSB手续费
				getCodeisWaiting: false,
				getCodeBtnColor: '#000',
				getCodeText: '发送',
				phone: '',
				Timer: '',
				code: '',
				loading: false,
				coin_rate_conf: [],
				coin_rate: '0'
			}
		},
		onLoad() {
			this.Index()
		},
		onShow() {
			this.password = ''
			this.pShow = false
			this.Tnum = ''
			this.Tname = ''
		},
		computed: {
			amounts() {
				return this.Tnum - (this.Tnum * this.sxf / 100)
			}
		},
		methods: {
			radioC(e) {
				this.type = e.detail.value
				this.changeRate()
			},
			changeRate() {
				this.coin_rate = `${this.coin_rate_conf[this.type].value}/${this.coin_rate_conf[this.type].text}`
			},
			Index() {
				Index().then(res => {
					this.info = res.data.info
					this.balance = this.info.balance_2
					this.sxf = res.data.exchange_percent
					this.transfer_fees = res.data.transfer_fees
					this.transfer_fees2 = res.data.transfer_fees2
					this.phone = this.info.phone
					this.coin_rate_conf = res.data.coin_rate_conf
					this.changeRate()
				})
			},
			getCode() {
				uni.hideKeyboard()
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "rgba(0,0,0,0.5)"
				let that = this
				//示例用定时器模拟请求效果
				setTimeout(() => {
					// uni.showToast({
					// 	title: '验证码已发送',
					// 	icon: "none"
					// });
					SendCode({
						phone: this.phone,
						type: 'transfer',
					}).then(res => {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					})
					//示例默认1234，生产中请删除这一句。
					// this.code = 1234;
					this.setTimer();
				}, 1000)
			},
			setTimer() {
				let holdTime = 60;
				this.getCodeText = "重新获取(60)"
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#000000";
						this.getCodeText = "重新发送"
						clearInterval(this.Timer);
						return;
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;

				}, 1000)
			},
			exchange() {
				// this.pShow = true
				if (this.loading) {
					return false
				}
				this.sure()
			},
			sure() {
				if (this.Tnum == '') {
					uni.showToast({
						title: '请输入兑换数量',
						icon: "none"
					})
					return false
				}
				if (this.type == 1 && this.password == '') {
					uni.showToast({
						title: '请输入支付密码',
						icon: "none"
					})
					return false
				}
				this.loading = true
				exchange({
					num: this.Tnum,
					password: this.password,
					type: this.type
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: "none"
					})
					if (res.status == 1) {
						setTimeout(() => {
							uni.navigateTo({
								url: './detail'
							})
						}, 700)
					} else {
						this.loading = false
					}
				})
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #0F172A;
		position: relative;
	}

	.passwordbox {
		position: fixed;
		width: 100%;
		left: 0;
		height: 100vh;
		background: #0000003b;
		top: 0;
		z-index: 9;

		.passwordmain {
			position: fixed;
			z-index: 999;
			background: #fff;
			width: 94%;
			left: 3%;
			padding: 40px 10px;
			box-sizing: border-box;
			border-radius: 8px;
			top: 25%;

			.password_title {
				font-size: 14px;
				font-weight: bold;
				border-bottom: 1px solid #ccc;
				padding-bottom: 8px;
			}

			input {
				margin-top: 10px;
				font-size: 14px;
				padding: 10px;
			}

			.btns {
				display: flex;
				justify-content: space-around;
				margin-top: 15px;

				.cancel {
					width: 40%;
					text-align: center;
					height: 40px;
					line-height: 40px;
					color: skyblue;
					border: 1px solid skyblue;
					border-radius: 8px;
				}

				.sure {
					width: 40%;
					text-align: center;
					height: 40px;
					line-height: 40px;
					border: 1px solid skyblue;
					background-color: skyblue;
					border-radius: 8px;
					color: #fff;
				}
			}
		}


	}

	.tips {
		font-size: 14px;
		margin-top: 10px;
		color: #fff;
	}

	.title {
		text-align: right;
		padding: 10px;
		color: #798AD6;
		font-size: 14px;
	}

	.typebox {
		background: #1E293B;
		width: 96%;
		margin: 0 auto;
		margin-top: 10px;
		font-size: 14px;
		padding: 15px;
		box-sizing: border-box;
		border-radius: 8px;
		margin-bottom: 15px;
		color: #fff;

		.type_item {
			display: flex;
			align-items: center;
			padding: 15px 0;
			font-size: 14px;

			text {
				margin-right: 20px;
			}

			radio-group {
				display: flex;
			}

			label {
				display: flex;
				align-items: center;
			}
		}
	}

	.btn {
		margin-top: 15px;

		.btn_sumbit {
			background: #7989D5;
			color: #fff;
			width: 80%;
			font-size: 14px;
			box-sizing: border-box;
		}
	}

	.business {
		background: #1E293B;
		width: 96%;
		margin: 0 auto;
		margin-top: 10px;
		font-size: 14px;
		padding: 15px;
		box-sizing: border-box;
		border-radius: 8px;
		margin-bottom: 15px;
		color: #fff;
	}

	.inputlist {
		display: flex;
		font-size: 14px;
		padding: 15px 0;

		.left {
			width: 25%;
			display: flex;

			.hx {
				display: block;
				width: 5px;
				color: red;
				margin-right: 3px;
			}
		}

		.right {
			width: 70%;

			input {
				font-size: 14px;
			}

			.picker_text {
				color: #fff;
			}

			.inputColor {
				color: #fff;
			}


		}
	}
</style>